<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }



        table {
            width: 600px;
            margin: 50px auto;

        }

        table,
        tr,
        th,
        td {
            border: 1px solid #000;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <!-- 定义ui结构 -->
    <!-- 三个文本框input和一个提交按钮button -->
    <form>
        <input type="text" placeholder="请输入姓名" name="uname" autocomplete="off">
        <input type="text" placeholder="请输入性别" name="gender" autocomplete="off">
        <input type="text" placeholder="请输入年龄" name="age" autocomplete="off">
        <button>提交</button>
    </form>

    <!-- 表单 -->
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>

        // 数据格式
        // const obj = {
        //     uname: 'yellow',
        //     gender: '男',
        //     age: 18
        // }


        // 先获取本地存储数据
        const data = localStorage.getItem('student-data')
        // 判断本地存储里是否有数据,没有就申明一个空数组
        const arr = data ? JSON.parse(data) : []


        // 录入模块
        const form = document.querySelector('form')
        // 获取所有的文本框
        const items = form.querySelectorAll('[name]')
        form.addEventListener('submit', function (e) {
            // 阻止表单默认提交
            e.preventDefault()
            // 申明一个空对象，只要表单提交一次就把文本框的value值追加给这个空对象
            const obj = {

            }
            // 其他属性通过输入的文本赋值，stuId必须自己赋值
            // 为了确保stuId的唯一性，所以需要判断
            obj.stuId = arr.length ? arr[arr.length - 1].stuId + 1 : 1
            // 遍历items，把五个表框的值都追加给对象
            for (let i = 0; i < items.length; i++) {
                item = items[i]
                //  非空判断
                if (item.value === '') return alert('请输入内容')
                // 把每个表框的值追加给对象
                obj[item.name] = item.value
            }
            // 把对象里的值追加给数组
            arr.push(obj)
            // 把数组的数据存储到本地存储
            localStorage.setItem('student-data', JSON.stringify(arr))
            // 重新渲染
            render()
            // 清空表单
            this.reset()
        })

        // 渲染模块
        const tbody = document.querySelector('tbody')
        function render() {
            // 用map()方法遍历arr数组，修改数据
            const newArr = arr.map(function (item, i) {
                // item是数组里的每个当前元素
                return `
        <tr>
          <td>${item.uname}</td>
          <td>${item.gender}</td>
          <td>${item.age}</td>
          <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
        </tr> 
        `
            })
            tbody.innerHTML = newArr.join('')
        }
        // 页面一开始就调用渲染函数
        render()

        // 删除模块
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                const n = e.target.dataset.id
                arr.splice(n, 1)
                // 重新把数组数据存储到本地
                localStorage.setItem('student-data', JSON.stringify(arr))
                // 重新调用渲染函数
                render()
            }
        })

    </script>
</body>

</html>
</script>
</body>

</html>